<!DOCTYPE html><html>
<head>
<title>Physic test, 120 falling crates</title>
<meta name = "viewport" content = "user-scalable=no, width=device-width">

</head>
<body>

<p>Sprite.js, physic test 120 falling crates. <a href="https://github.com/batiste/sprite.js">Github project page</a><br>
<span id="result"></span> <br>
<a href="?canvas=1" id="canvas-mode">Use canvas backend.</a> <a href="?html=1" id="html-mode">Use HTML backend</a></p>

</body>
<script src="../sprite.js"></script>
<script src="../lib/collision.js"></script>
<script>

window.onload = function() {
var scene = sjs.Scene({w:600, h:600});

scene.loadImages(['img/crate.png'], function() {

    if(window.location.href.indexOf('canvas') != -1) {
        document.getElementById('canvas-mode').style.display = 'none';
    } else {
        document.getElementById('html-mode').style.display = 'none';
    }
    result = document.getElementById('result');

    var bg = scene.Sprite(false);
    bg.position(0, 600-32);
    bg.size(600, 20);
    bg.setColor('#999');
    bg.update();

    var crates = [];

    for(var i=0; i<120; i++) {
        var sp = scene.Sprite('img/crate.png');
        sp.move(32 + (i % 12) * 35, (i/12.0|0)* 50);
        sp.update();
        crates.push(sp);
    }

    function hasCollision(crate) {
        if(crate.y + 32 > 600 - 32)
            return true;
        if(crate.collidesWithArray(crates))
            return true;
        return false;
    }

    var gravity = 0.5;

    function paint() {

        bg.update();

        for(var i=0; i<crates.length; i++) {
            var crate = crates[i];
            crate.yv += gravity;
            crate.applyYVelocity();
            if(hasCollision(crate)) {
                crate.reverseYVelocity();
                crate.yv = 0;
            }
            crate.update()
        }

        if(ticker.currentTick % 30 == 0) {
            result.innerHTML = 'system load ' + ticker.load + '%';
        }
    };
    var ticker = scene.Ticker(paint);
    ticker.run();

});

};
</script>
</html>
